<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	 <style>
	        .active {
	            background: orange;
	        }
	    </style>
	</head>
	
	<body>
	    <button id="btn1" class="active">按钮1</button>
	    <button id="btn2">按钮2</button>
	    <button id="btn3">按钮3</button>
	    <button id="btn4">按钮4</button>
		
		<script type="text/javascript">
			//通过标签获取button元素
			var btn= document.getElementsByTagName('button')
			for(i=0;i<btn.length;i++){
				
				
				btn[i].onclick=function(){
					//先移出 后添加
					//只给当前电机的这个元素添加active，其他元素都要移出
					//通过循环把每个按钮的active都移出
					for(var j =0;j<btn.length;j++ ){
						btn[j].className='';
						
						
						
					}
					this.className='active';
					
				}
				
				
			}
			
		</script>
	</body>
</html>
